<ion-header>
  <ion-navbar color="dark">
    <!-- <a color="dark">地区选择</a> -->
    <ion-title class="center">
      <img class="logo" src="assets/images/logo.png" alt="">
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
    <ion-slides style="width:100%;height:200px" >
      <ion-slide *ngFor="let banner of banners">
        <img src="{{bannerPath}}/{{banner.bannerImg}}" >
      </ion-slide>
  </ion-slides>
  <ion-item style="padding: 0;border: none;">
      <label class="topic">运动话题</label>
      <a class="more right">更多<i></i></a>
  </ion-item>
  <div class="topic-left">
    <img src="assets/images/bg-topic-left.jpg" alt="">
    <div class="tit">
      <p>运动小常识<br/>/<br/>1003人参与</p>
    </div>
  </div>
  <div class="topic-right">
    <img src="assets/images/bg-topic-right.jpg" alt="">
    <div class="tit">
      <p>运动健康美食<br/>/<br/>500人参与</p>
    </div>
  </div>
  <ion-item style="padding: 0;border: none;">
      <label class="topic">精选动态</label>
  </ion-item>
  <ion-card *ngFor="let user of users">
    <ion-item>
      <ion-avatar item-start>
        <img src="assets/images/{{user.userface}}">
      </ion-avatar>
      <h2>{{user.username}}</h2>
      <p>{{user.pubtime}}</p>
    </ion-item>
    <img src="assets/images/{{user.img}}">
    <ion-card-content>
      <p>{{user.component}}</p>
    </ion-card-content>
    <ion-row>
      <ion-col>
        <button ion-button icon-left clear small >
          <ion-icon name="thumbs-up"></ion-icon>
          <div>{{user.likeNum}} 喜欢</div>
        </button>
      </ion-col>
      <ion-col>
        <button ion-button icon-left clear small>
          <ion-icon name="text"></ion-icon>
          <div>{{user.commetNum}} 评论</div>
        </button>
      </ion-col>
      <ion-col center text-center>
        <ion-note>
          {{user.ago}}小时 之前
        </ion-note>
      </ion-col>
    </ion-row>
  </ion-card>
</ion-content>
